flutter实现网络请求完成后再加载页面

您所在的位置：网站首页 › flutter 加载动画 › flutter实现网络请求完成后再加载页面

flutter实现网络请求完成后再加载页面

2023-08-28 13:04| 来源: 网络整理| 查看: 265

很多时候我们有这样一个需求，需要在网络请求完了之后再去渲染页面，尤其是在一个界面有多个相关网络请求的时候需要处理。这里不得不提到一个系统的组件FutureBuilder，我们直接来看用法。

单网络请求时：

@override Widget buildWidget(BuildContext context, Store store) { // TODO: implement buildWidget return Scaffold( body: FutureBuilder( future: fetchPost, builder: (BuildContext context, AsyncSnapshot snapShot) { print('connectionState:${snapShot.connectionState}'); if (snapShot.connectionState == ConnectionState.waiting) { return Text('Loading...'); } else if (snapShot.connectionState == ConnectionState.done) { print(snapShot.hasError); print('data:${snapShot.data}'); if (snapShot.hasError) { return Text('Error: ${snapShot.error}'); } return ListView( ...

其中第一个参数 future对应的是一个具有Future返回值的方法，这个方法可以是一个网络请求，比如

Future fetchPost() async { final response = await http.get('http://www.devio.org/io/flutter_app/json/test_common_model.json'); Utf8Decoder utf8decoder = Utf8Decoder(); //fix 中文乱码 var result = json.decode(utf8decoder.convert(response.bodyBytes)); return CommonModel.fromJson(result); } 避免重复网络请求：

但是这样写会有一个问题，那就是当我们调用setstate的时候，将会刷新整个FutureBuilder,结果会是fetchPost这个方法会调用多次，造成了不必要的请求和资源浪费。所以我们建议这样写

var _futureBuilderFuture; @override void initState() { _futureBuilderFuture = fetchPost(); super.initState(); }

在futureBuilder中引用：

future: _futureBuilderFuture,

这样当我们调用setstate的时候，就不会有多次网络请求了

【本文地址】

flutter实现网络请求完成后再加载页面

flutter实现网络请求完成后再加载页面

今日新闻

推荐新闻